<template lang="pug">
  ModuleWrapper(title="历年种植产值（万元）" flex="1")
    .chart-wrap(ref="chart")
</template>

<script>
export default {
  name: "ModulePopulation",
  data() {
    return {
      chart: null,
      data: [
        {
          label: '总人口',
          value: 0,
        },
        {
          label: '农业人口',
          value: 0,
        },
        {
          label: '新型职业农民',
          value: 0,
        },
        {
          label: '产业工人',
          value: 0,
        },
      ]
    }
  },
  methods: {
    renderChart() {
      this.chart = this.$echarts.init(this.$refs['chart']);
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['2016', '2017', '2018', '2019', '2020'],
            axisTick: {
              alignWithLabel: true
            },
            textStyle: {
              color: '#FFF',
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            textStyle: {
              color: '#FFF',
            }
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [45, 35, 55, 85, 105]
          }
        ]
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.renderChart();
    });
  }
}
</script>

<style lang="scss" scoped>
.module{
  display: flex;
  flex-direction: column;
  .chart-wrap{
    flex: 1;
  }
}
</style>
